<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>APP 页面</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/daohang.css">
    <link rel="stylesheet" href="css/app.css">
</head>

<body>
    <!-- 导航栏 -->
    <nav>
        <ul>
            <!-- 左边浮动 -->
            <div class="left">
                <li class="logo">
                    <a href=""> <span>BOSS直聘</span></a>
                </li>
            </div>

            <div class="center">
                <li id="shouye"><a href="./shouye.html"><span>首页</span></a></li>
                <li id="job"><a href="./job.html"><span>职位</span></a></li>
                <li id="campus"><a href="./campus.html"><span>校园</span></a></li>
                <li id="turtle"><a href="./turtle.html"><span>海归</span></a></li>
                <li id="company"><a href="./company.html"><span>公司</span></a></li>
                <li id="app"><a href="./APP.html"><span id="current">APP</span></a></li>
                <li id="news"><a href="./zixun.html"><span>资讯</span></a></li>
         
                <li id="all-in"><a href="./youle.html"><span>有了</span></a></li>
                <li id="baike"><a href="./baike.html"><span>百科</span></a></li>
            </div>
            <div class="right">
                <!-- 右边浮动 -->
                <li><a href=""><span>上传简历</span></a></li>
                <li><a href=""><span>我要找工作</span></a></li>
                <li><a href=""><span>我要招聘</span></a></li>
                <li><a href=""><input type="button" value="注册"></a></li>
                <li><a href=""><input type="submit" value="登录"></a></li>
            </div>
        </ul>
    </nav>

    <!-- 中间部分 -->
    <div id="main">
        <div id="full-view">
            <!-- 第一块 -->
            <div class="sec full-app">
                <div class="inner">
                    <!-- 左边 -->
                    <div id="one-left" class="figure animation fadeInLeft">
                        <div class="app-chat">
                            <div class="app-inner"></div>
                        </div>
                        <div class="app-tip"></div>
                    </div>
                    <!-- 右边 -->
                    <div class="text animation fadeInRight" id="one-right">
                        <h3 class="title">找工作要跟，老板谈</h3>
                        <div class="des">下载BOSS直聘APP</div>
                        <div class="app-btns">
                            <div class="app-qrcode animation fadeIn">
                                <img src="./img/app/generate.jpg" alt="">
                            </div>
                            <a href="#" class="btn-iphone" ka="iphone-app">
                                <span>iPhone</span>
                            </a>
                            <a href="#" class="btn-android" ka="android-app">
                                <span>Android</span>
                            </a>
                        </div>
                    </div>

                </div>
            </div>
            <!-- 第二块 -->
            <div class="sec company-chat">
                <div class="inner">
                    <div class="text animation fadeInDown">
                        <h3 class="title">BOSS直聘</h3>
                        <div class="des">企业BOSS与职场牛人直接在线开聊</div>
                    </div>
                    <div id='two-bottom' class="figure animation fadeIn">
                        <div class="figure-phone animation fadeInUp"></div>
                        <div class="figure-logo animation bounceIn">
                            <img src="https://static.zhipin.com/v2/web/news/images/logo.png" alt="">
                        </div>
                        <ul class="figure-members">
                            <li class="user-1 scale-big animation fadeIn show-boss-img">
                                <img class="boss-img" src="https://static.zhipin.com/v2/web/news/images/boss-1.png"
                                    alt="">
                                <img class="company-img"
                                    src="https://static.zhipin.com/v2/web/news/images/company-1.png" alt="">
                            </li>
                            <li class="user-2 animation fadeIn show-boss-img">
                                <img class="boss-img" src="https://static.zhipin.com/v2/web/news/images/boss-2.png"
                                    alt="">
                                <img class="company-img"
                                    src="https://static.zhipin.com/v2/web/news/images/company-2.png" alt="">
                            </li>
                            <li class="user-3 animation fadeIn show-boss-img">
                                <img class="boss-img" src="https://static.zhipin.com/v2/web/news/images/boss-3.png"
                                    alt="">
                                <img class="company-img"
                                    src="https://static.zhipin.com/v2/web/news/images/company-3.png" alt="">
                            </li>
                            <li class="user-4 scale-big animation fadeIn show-boss-img">
                                <img class="boss-img" src="https://static.zhipin.com/v2/web/news/images/boss-4.png"
                                    alt="">
                                <img class="company-img"
                                    src="https://static.zhipin.com/v2/web/news/images/company-4.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 第三块 -->
            <div class="sec full-direcruit">
                <div class="inner">
                    <div id="three-left" class="figure animation fadeInLeft">
                        <div class="chat-list">
                            <div class="chat-inner"></div>
                        </div>
                        <div class="chat-tip"></div>
                    </div>
                    <div class="text animation fadeInRight">
                        <h3 class="title">直聘 / direcruit</h3>
                        <div class="des">在APP上跟未来BOSS直接开聊 与冷冰冰的简历投递说再见</div>
                    </div>
                </div>
            </div>
            <!-- 第四块 -->
            <div class="sec full-company">
                <div class="inner">
                    <div class="text animation fadeInDown">
                        <h3 class="title">名企 / BIG COMPANY</h3>
                        <div class="des">阿里百度腾讯，滴滴美团京东。都在用BOSS直聘招人</div>
                    </div>
                    <div class="figure">
                        <div class="figure-computer animation fadeInUp"></div>
                        <ul class="figure-logos">
                            <li class="logo-1 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-baidu.png" alt="">
                            </li>
                            <li class="logo-2 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-didi.png" alt="">
                            </li>
                            <li class="logo-3 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-meituan.png" alt="">
                            </li>
                            <li class="logo-4 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-ali.png" alt="">
                            </li>
                            <li class="logo-5 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-jd.png" alt="">
                            </li>
                            <li class="logo-6 animation fadeIn">
                                <img src="https://static.zhipin.com/v2/web/news/images/logo-tencent.png" alt="">
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- 55555 -->
            <div class="sec full-decent">
                <div class="inner">
                    <div id="five-right" class="figure animation fadeInRight">
                        <div class="figure-phone"></div>
                        <ul class="figure-cards show-card" id="figure-cards">
                            <li class="card-1"></li>
                            <li class="card-2"></li>
                            <li class="card-3"></li>
                            <li class="card-4"></li>
                            <li class="card-5"></li>
                            <li class="card-6"></li>
                        </ul>
                    </div>
                    <div class="text animation fadeInLeft">
                        <h3 class="title">DECENT PAY / 高薪</h3>
                        <div class="des">除了真人在线之外 BOSS们认为最能表现诚意的是可观的薪资</div>
                    </div>
                </div>
            </div>
            <!-- 666666 -->
            <div class="sec sec-other">
                <div class="inner">
                    <div class="mod-always animation fadeIn">
                        <h3 class="title">他们一直在用</h3>
                        <div class="scroll-wrap">
                            <div class="bx-wrapper">
                                <div class="bx-viewport">
                                    <ul class="company-list" data-index="0">
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-1.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-2.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-3.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-4.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-5.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-6.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-7.png" alt="">
                                        </li>


                                    </ul>
                                    <ul class="company-list" data-index="1">
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-8.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-9.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-10.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-11.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-12.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-13.png" alt="">
                                        </li>
                                        <li class="bx-clone">
                                            <img src="https://static.zhipin.com/v2/web/news/images/c-14.png" alt="">
                                        </li>
                                    </ul>
                                </div>
                                <div class="bx-controls bx-has-controls-direction">
                                    <div class="bx-controls-direction">
                                        <a class="bx-prev" href="#">Prev</a>
                                        <a class="bx-next" href="#">Next</a>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部 -->


    <script src="./jquery-3.6.0.js"></script>
    <script>
        // ^^^^^^^^^^^^^^^^^^^^^^^^第一块动画效果^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
        $(window).ready(function () {
            $("#one-left").animate({
                left: "0"
            }, 1000);
            $('.app-tip').fadeIn('5000')
            $("#three-left").animate({
                left: "10px"
            }, 1000);
            $('.chat-tip').fadeIn('5000')
            $('.full-decent .figure-logos').show('400')
            $('#five-right').animate({
                right: "0"
            }, 1000);

            window.addEventListener('scroll', function () {
                console.log(document.documentElement.scrollTop);
                // console.log($('.company-chat').offset().top);
                // console.log($('.full-direcruit').offset().top);

                // console.log($('.full-company').offset().top);
                if (document.documentElement.scrollTop <= 853) {
                    $('.boss-img').fadeIn().animate(200);
                    $('.company-img').fadeOut().animate(200);
                } else if (document.documentElement.scrollTop >= 853) {

                    $('.boss-img').hide().animate(200);
                    $('.company-img').fadeIn().animate(200);

                } else if (document.documentElement.scrollTop > 1810) {


                }
                // && document.documentElement.scrollTop <= 2635
            })
        })

        // ^^^^^^^^^^^^^^^^^第二块^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^


        // ---------先设置轮播图部分--------------
        // 不点击让其自己自动变换



        // 全局变量记录图片索引值 初始第一ul
        let index = 0;
        let time = setInterval(nextUl, 2000)
        // 点击右边
        $('.bx-next').click(() => {
            nextUl();
            return false;
        })
        function nextUl() {
            index = index >= $('.company-list').length - 1 ? 0 : ++index;
            showUl();
        }


        // 点击左边
        $('.bx-prev').click(()=>{
            index = index <= 0 ? $('.company-list').length - 1 : (index - 1);
            showUl();
            return false;
        })
        const showUl=()=>{
            $('.company-list').eq(index).show().siblings().hide();
        }
        $('.scroll-wrap').hover(()=>{
              // 监听鼠标移入
            clearInterval(time);
        },()=>{
              // 监听鼠标移出
              time =setInterval(nextUl,2000);
        })


    </script>
</body>

</html>